<template>
  <!-- <div class="layout">
    <file-list menuName="/dataset" class="file-list" type="dataset" :url="url" :bizId="url" />
  </div> -->
  <div>
    <div class="handle">
      <!-- <a href="javascript:;" class="upload" @click="dagUpload"></a> -->
      <!-- <btn-upload @succeedOver="succeedOver" class="add-file-btn" type="dataset" :taskId="path" :bizId="bizId" /> -->
      <a href="javascript:;" class="refresh" @click="dagRefresh"></a>
    </div>
    <div class="breadcrumb">
      <span v-for="(e, i) in paths" :key="i" class="item">
        <a href="javascript:;" @click="goNextNav(e, i)">{{ e.name }}</a>
        <span v-if="i < paths.length - 1">/</span>
      </span>
    </div>
    <dl class="file-lis">
      <!-- <dt> -->
        <!-- <span class="name">名称</span> -->
        <!-- <span class="size">文件大小</span> -->
      <!-- </dt> -->
      <dd v-for="(e, i) in fileList" :key="i">
        <span @click="goNext(e)" :class="['name', handleIcon(e.dir, e.suffix)]">{{ e.name }}</span>
        <!-- <span class="size">{{ formatFileSize(e.size) }}</span> -->
      </dd>
      <dd v-if="!fileList || fileList.length == 0" class="placeholder">暂无文件</dd>
    </dl>
  </div>
</template>

<script>
import { usersInfo } from '@/api/login'
import { listByPage } from '@/api/file'
import { zipFormat, mediaFormat } from "@/utils/maps";
// import btnUpload from './Uploader'

export default {
  name: 'dataset',
  data () {
    return {
      bizId: this.$route.query.canvas_id,
      fileList: [],
      path: '',
      datasArr: [],
      paths:[
        {
          name: "dataset",
          path: this.$route.query.canvas_id,
          dir: true
        },
      ],
      info: {}
    }
  },
  props: ['canvasData'],
  watch: {
    canvasData(val) {
      this.datasArr = val.canvasData[0]
      this.bizId = val.canvasData[0].datasetId
      this.paths.path = val.canvasData[0].datasetId
    }
  },
  created () {
    
  },
  components: {
    // btnUpload
  },
  methods: {
    async getUserInfo() {
      let info = await usersInfo()
      this.info = info.data
      return false
    },
    async getList(url, type) {
      if (!url) {
        return;
      }
      this.path = url;
      let info = await usersInfo()
      this.info = info.data
      let relativePath = url.split(this.bizId)[1]
      let queryParams = {
        bizId: this.bizId,
        relativePath,
        tenantId: this.info.org_id,
        type,
        showHidden: false,
        page: 1,
        pageSize: 100,
      };
      let res = await listByPage(queryParams)
      this.fileList = res.data.files
    },
    handleIcon(dir, suffix) {
      if (dir) return "dir";
      if (zipFormat[suffix]) return "zip";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "pic") return "pic";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "video") return "video";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "voice") return "voice";
      return "text";
    },
    goNext(e) {
      if (!e.dir) return
      let url = e.path.split(`dataset/`)[1]
      this.paths.push({
        name: e.name,
        path: e.path,
        dir: true
      })
      this.getList(url, 'dataset')
    },
    goNextNav(e, i) {
      let url = e.path.replace(`/onebrain/${this.info.org_id}/dataset/`, "")
      let num = this.paths.length - i - 1;
      this.paths.splice(i + 1, num);
      this.getList(url, 'dataset')
    },
    formatFileSize(fileSize) {
      if (fileSize < 1024) {
        return fileSize + "B";
      } else if (fileSize < 1024 * 1024) {
        let temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (fileSize < 1024 * 1024 * 1024) {
        let temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        let temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
    succeedOver (data) {
      console.log(data)
      this.getList(this.path, 'dataset');
    },
    dagRefresh() {
      this.getList(this.path, 'dataset');
    },
  },
  async mounted () {
    await this.getUserInfo()
    this.bizId = this.canvasData.canvasDatasets[0].datasetId
    await this.getList(this.canvasData.canvasDatasets[0].datasetId+'/editable', 'dataset')
    this.datasArr = this.canvasData.canvasDatasets[0]
    console.log(this.canvasData.canvasDatasets[0])
  },
  destroyed () {

  }
}
</script>

<style lang="less" scoped>
.handle{
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  height: 26px;
  padding-top: 10px;
  border-top: 1px solid #E4E7ED;
  border-bottom: 1px solid #E4E7ED;
  .add-file-btn{
    width: 16px;
    height: 16px;
  }
  .refresh{
    background: url(~@/assets/img/refresh.png) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
  }
}

.breadcrumb{
  overflow: hidden;
  padding-left: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .item{
    // float: left;
    span{
      margin: 0 4px;
    }
    a{
      color: #4285F4;
    }
  }
}
.file-lis{
  dt{
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    .name{
      padding-left: 0px;
    }
  }
  dd{
    // display: flex;
    // justify-content: space-between;
    height: 32px;
    line-height: 32px;

  }
  .name{
    padding-left: 32px;
    padding-right: 16px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .size{

  }
  .placeholder{
    text-align: center;
    display: block;
    width: 100%;
    padding-top: 40px;
  }
}
.dir {
  background: url(~@/assets/img/file-icon/dir.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.zip {
  background: url(~@/assets/img/file-icon/zip.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.pic {
  background: url(~@/assets/img/file-icon/pic.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.video {
  background: url(~@/assets/img/file-icon/video.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.voice {
  background: url(~@/assets/img/file-icon/voice.png) no-repeat 6px center;
  background-size: 22px 22px;
}
.text {
  background: url(~@/assets/img/file-icon/text.png) no-repeat 6px center;
  background-size: 22px 22px;
}
</style>
